/* 
    第九章:DOM基本操作
*/
//全局变量
var ohouse=document.getElementById("house");
var oli=ohouse.getElementsByTagName("li");
// var ohouse=document.querySelector("#house");
// var oli=ohouse.querySelectorAll("li");

//var oli=document.querySelectorAll("#house>li");

window.onload=function(){
    //调用函数
    ulChangeText();
    //数组放置到ul li里边
    arryIntoULli();
    //document.getElementsbyName(); 根据表单name选择表单元素。
    inputChange();
    //创建元素节点，并插入已存在元素中去。
    shuzu2InsertElements();
    //调用创建普通元素
    createSimpleElement();
    //创建复杂元素节点
    createImgElement();
    //调用创建多元素表格
     createElementTable();
    //点击插入按钮，在页在中列出。
    inputOnclickInsertComment();
    //在父元素的某个子元素之前插入
    inputOnclickInsertBefor();
    //复制节点并插入到指定位置
    cloneNodeInsert();
    //复制后内容，再插入信息，再替换
    UlreplaceChild();
}
//复制后，在文档框内添加内容后，点击替换内容
function UlreplaceChild () {
    //选择元素节点，为其添加onclick事件
    var oBtn=document.getElementById("btn4");
    oBtn.onclick=function insertInput() {
    var oForm=document.querySelector("#form");
    var oFormul=document.querySelector("#form>ul");
  
    var oCloneNode1=document.getElementById("cloneNode1");
    oForm.replaceChild(oCloneNode1,oFormul);
    
    }
   
}
//复制节点并插入到指定位置
function cloneNodeInsert () {
    //选择元素节点，为其添加onclick事件
    var oBtn=document.getElementById("btn3");
    oBtn.onclick=function insertInput() {
    var oFormUl=document.querySelector("#form ul");
    //cloneNode(),复制元素节点，参数值为1表示复制包含子元素
    var oCloneNodeUL=oFormUl.cloneNode(1);
    var oCloneNode1=document.getElementById("cloneNode1");
    //复制结果插入到指定子节点末尾
    oCloneNode1.appendChild(oCloneNodeUL);     
    
    }
   
}


//在文本框中输入文字，点击插入添加到页面指定位置
function inputOnclickInsertBefor() {
    //选择元素节点，为其添加onclick事件
    var oBtn=document.getElementById("btn2");
    oBtn.onclick=function insertInput() {

        var oKeyword=document.getElementById("keyword");
        //查询选择器，使用CSS选择器语法来选择
        var oul=document.querySelector("#form ul");
        var oInputTxt=document.createTextNode(oKeyword.value);
        var oLi=document.createElement("li");
            oLi.appendChild(oInputTxt);
           // oul.appendChild(oLi);
           var oinsertPoint=document.getElementById("insertPoint");
            oul.insertBefore(oLi,oinsertPoint)
       

        //查询选择所有方法，返回是对象集合。用于改变CSS
        var oUlLi=document.querySelectorAll("#form ul li");
        for(var i=0;i<oUlLi.length;i++){
            oUlLi[i].style.background="gray";
            oUlLi[i].style.border="2px solid red";
            oUlLi[i].style.margin="5px";
            oUlLi[i].style.width="70%";
        }
    
    }
   
}
//在文本框中输入文字，点击插入添加到页面中
function inputOnclickInsertComment() {
    //选择元素节点，为其添加onclick事件
    var oBtn=document.getElementById("btn");
    oBtn.onclick=function insertInput() {

        var oKeyword=document.getElementById("keyword");
        //查询选择器，使用CSS选择器语法来选择
        var oul=document.querySelector("#form ul");
        var oInputTxt=document.createTextNode(oKeyword.value);
        var oLi=document.createElement("li");
            oLi.appendChild(oInputTxt);
            oul.appendChild(oLi);
        
       

        //查询选择所有方法，返回是对象集合。用于改变CSS
        var oUlLi=document.querySelectorAll("#form ul li");
        for(var i=0;i<oUlLi.length;i++){
            oUlLi[i].style.background="gray";
            oUlLi[i].style.border="2px solid red";
            oUlLi[i].style.margin="5px";
            oUlLi[i].style.width="70%";
        }
    
    }
   
}
//创建多元素表格
function createElementTable() {
    var oContent3=document.getElementById("content3");
    var contextzj=document.createComment("插入注解试试");
    oContent3.appendChild(contextzj);
    var oTable=document.createElement("table");  
    for(var i=0;i<5;i++){
        var otr=document.createElement("tr");
        for(var j=0;j<5;j++){
            var otd=document.createElement("td");
            var otdTxt=document.createTextNode("单元格");
            otd.appendChild(otdTxt); //单元格插入文本节点
            otr.appendChild(otd); //td元素节点插入tr
        }
        oTable.appendChild(otr); //把tr元素节点插入到table 
    }
    oContent3.appendChild(oTable)
}
//创建复杂元素节点
function createImgElement () {
var oContent2=document.getElementById("content2");   
var oImg=document.createElement("img");
    oImg.src="images/dog.jpg";
    oImg.style.border="2px solid red";
    oImg.style.height="80px";        
oContent2.appendChild(oImg);
}

//创建普通元素
function createSimpleElement() {
    //获取#content1
    var oContent1=document.getElementById("content1");
    var oStrong=document.createElement("strong"); //创建元素节点
        /* 创建复杂元素添加了属性如下，还可以添加表单选择等属性 */
        oStrong.id="bgColor"
        oStrong.className="fontred";
    var oTxt=document.createTextNode("创建文本节点的内容");
    
    oStrong.append(oTxt); //把文本节点添加到元素节点中。
    oContent1.append(oStrong); //创建的元素节点添加到文档已经存在的#content中
}


//取表达元素，生成数组

function ulChangeText(){
   
    //document.write("oli的值:"+oli);
    var oshuzu1=document.getElementById("shuzu1");
    var oshuzu2=document.getElementById("shuzu2");
    oshuzu1.innerHTML="ddddddddd";
    /* ------打印出ul li里的内容---------- */
    for(var i=0;i<oli.length;i++){
        //document.write(" "+oli[i].innerHTML);
    }
    var lis=["ccc"];

    for(var i=0;i<oli.length;i++){
        lis.push(oli[i].innerHTML);
    }
    oshuzu1.innerHTML=lis;
    oshuzu2.innerHTML=lis.reverse();
    //document.write("<br/>lis:"+lis.join("---"));
}
//改变li包含的文本
function arryIntoULli(){
   var liText=["张三","李四","王二","李四","王二","李四","王二","李四","王二"];
   for(var i=0;i<liText.length;i++){

       
       if(i%2==0&&i<oli.length){
         oli[i].innerHTML=liText[i];
           oli[i].style.background="white";
       }
   }
}
//通过表单name的名字，选择表单元素
function inputChange(){
    var oinput=document.getElementsByName("lover");
    oinput[1].checked=true;
}

//给id为#shuzu2,插入已建元素。
function shuzu2InsertElements(){
    var shuzu2=document.getElementById("shuzu2");
    var oStrong=document.createElement("strong");
    var oStrongTxt=document.createTextNode("Strong标签的文本节点内容");
    oStrong.appendChild(oStrongTxt);//创建的元素节点插入文本节点。
    shuzu2.appendChild(oStrong);

}
